<template>
  <view class="albun-list-container">
    <view
      v-for="item in albumListData"
      :key="item.id"
      class="albun-list-item"
      @click=handleDetail(item)>
      
      <view class="flex ac jb album-name">
        <view class="flex ac jb">
          <image
            src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01Fg3c1t2BzNQcCo3GS_!!1888948409.png"
            mode="scaleToFill"
            class="album-icon"
          />
          <view class="name">{{ item.album_name }}</view>
        </view>
        <view class="flex ac all-icon">
          <text>查看全部</text>
          <u-icon name="arrow-right" color="#888" size="22"></u-icon>
        </view>
      </view>

      <view class="artworks-content">
        <block
          v-for="(artworksItem, index) in item.image_list"
          :key="index">
          <view
            v-if="index < 4"
            class="artworks-item">
            <u-image
              v-if="(artworksItem.type != 4 && artworksItem.type != 8)"
              width="149rpx"
              height="149rpx"
              :lazy-load="true"
              :fade="false"
              :border-radius="0"
              :show-menu-by-longpress="false"
              :src="artworksItem.wx_cover_url || artworksItem.cover_url"
              class="image">
              <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
            </u-image>
            <block v-else>
              <u-image
                width="149rpx"
                height="149rpx"
                :lazy-load="true"
                :fade="false"
                :border-radius="0"
                :show-menu-by-longpress="false"
                :src="`${artworksItem.cover_url}?vframe/jpg/offset/1`"
                class="image">
                <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
              </u-image>
              <image
                src="@/static/image/play.png"
                mode="scaleToFill"
                class="play-icon"
              />
            </block>
            <view v-if="index === 3 && (item.image_list.length - 4) > 0" class="artworks-num">+{{ item.image_list.length - 4 }}</view>
          </view>
        </block>
      </view>

      <view class="flex ac jb create-album-footer">
        <view class="create-album flex jc ac" @click.stop="handleBatchAddArtAlbumWorks(item)">
          <u-icon name="plus" color="#fff" size="24"></u-icon>
          <text>批量添加</text>
        </view>
        <view v-if="item.class_url" class="class-text" @click.stop="handleViewClass(item)">
          查看教程
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import Title from '@/components/title/title';
import EditArtworksAlbum from '@/components/createArtworksAlbum/createArtworksAlbum';
import { mapGetters } from 'vuex';
export default {
  components: {
    Title,
    EditArtworksAlbum
  },
  props: {
    albumList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      albumListData: this.albumList,
      editAlbum: {
        popupShow: false,
        popupTitle: '编辑专辑',
        albumInfo: {
          id: '', // 专辑id
          name: '', // 专辑名称
          is_top: '', // 是否置顶
          author_id: '', // 主页id
          artworks_type_id: '' // 作品类型
        }
      },
    }
  },
  computed: {
    ...mapGetters([
      'artworksTypeAllListData',
    ])
  },
  watch: {
    albumList: {
      immediate: true,
      handler(val, oldValue) {
        this.albumListData = val;
      }
    },
  },
  methods: {

    // 查看教程
    handleViewClass(item) {
      // uni.navigateTo({
      //   url: `/pages/web/index?url=${encodeURIComponent(item.class_url)}`
      // })
      location.href = item.class_url;
    },

    // 编辑专辑
    handleEditAlbum(itemData) {
      this.editAlbum.albumInfo.id = itemData.id;
      this.editAlbum.albumInfo.name = itemData.name;
      this.editAlbum.albumInfo.is_top = itemData.is_top;
      this.editAlbum.albumInfo.author_id = itemData.author_id;
      this.editAlbum.albumInfo.artworks_type_id = itemData.artworks_type_id;
      this.editAlbum.popupShow = true;
    },

    // 编辑成功
    handleDetail(rowData) {
      this.$emit('handleDetail', rowData.id)
    },

    // 批量添加
    handleBatchAddArtAlbumWorks(rowData) {
      this.$emit('handleBatchAddArtAlbumWorks', rowData.id)
    },

    // 关闭
    close() {
      this.editAlbum.albumInfo.id = '';
      this.editAlbum.albumInfo.name = '';
      this.editAlbum.albumInfo.is_top = '';
      this.editAlbum.albumInfo.author_id = '';
      this.editAlbum.albumInfo.artworks_type_id = '';
      this.editAlbum.popupShow = false;
    },

    // 上传作品到该专辑
    uploadArtworks(itemData) {
      if(itemData.author_id) {
        uni.navigateTo({
          url: `/pages/publish/publish?author_id=${itemData.author_id}&currentArtworksType=0&album_id=${itemData.id}`
        })
      } else {
        uni.showToast({
          title: '请选择对应的达人主页。',
          icon: 'none'
        })
      }
    },

    // 点击专辑详情
    handleAlbumDetail(itemData) {
      uni.navigateTo({
        url: `/pages/artworks/albumArtworksList?author_id=${itemData.author_id}&type=${itemData.artworks_type_id}&album_id=${itemData.id}&album_name=${itemData.name}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .albun-list-container{

    .album-name{
      margin-bottom: 24rpx;

      .name{
        font-size: 30rpx;
        font-weight: bold;
        color: #172B4D;
      }
    }

    .all-icon{
      font-size: 24rpx;
      color: #888;
    }

    .create-album-footer{
      width: 100%;
      flex-direction: row-reverse;
    }

    .class-text{
      font-size: 24rpx;
      color: $uni-color-primary;
    }

    .album-icon{
      width: 36rpx;
      height: 36rpx;
      margin-right: 12rpx;
    }

    .albun-list-item{
      padding: 24rpx;
      border-radius: 16rpx;
      box-shadow: 0rpx 1rpx 10rpx 2rpx #d5dcf0;
      margin-bottom: 24rpx;

      .create-album{
        width: 180rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        padding: 12rpx 24rpx;
        border-radius: 30rpx;
        background-color: $uni-color-primary;
      }

      .artworks-content{
        padding: 12rpx 0;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12rpx;

        .artworks-item{
          width: 149rpx;
          height: 149rpx;
          position: relative;
          border-radius: 8rpx;
          overflow: hidden;
          margin-right: 8rpx;
          margin-left: 7.5rpx;
          border: 1rpx solid #eaeaea;
        }

        .play-icon{
          position: absolute;
          width: 60rpx;
          height: 60rpx;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          border-radius: 50%;
          background: rgba($color: #000000, $alpha: .5);
        }

        .add-artworks{
          margin: 24rpx auto;
          background-color: #f3f7fb;
          padding: 12rpx 24rpx;
          border-radius: 32rpx;
          color: $uni-color-primary;
          font-size: 24rpx;
        }

        .artworks-item:nth-child(4n - 3) {
          margin-left: 0;
        }

        .artworks-item:nth-child(4n) {
          margin-right: 0;
        }

        .artworks-num{
          position: absolute;
          right: 0;
          top: 0;
          padding: 6rpx 16rpx;
          text-align: center;
          background: rgba(000, 000, 000, .6);
          color: #fff;
          border-radius: 0 8rpx 0 20rpx;
          font-size: 24rpx;
        }
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 24rpx;
        color: #fff;
        border-radius: 6rpx;
        margin-left: 12rpx;
        background-color: $uni-color-primary2;
      }
    }
  }
</style>
